<template>
  <div class="page-container">
    <div class="teacher-content">
      <!-- 讲师信息头部 -->
      <div class="teacher-header card">
        <div class="header-content">
          <div class="teacher-info">
            <div class="teacher-avatar">
              <img :src="teacher.avatar" :alt="teacher.name">
              <div class="teacher-tag" v-if="teacher.isNew">新加入</div>
            </div>
            <div class="teacher-text">
              <h1>{{ teacher.name }}</h1>
              <p class="teacher-title">{{ teacher.title }}</p>
              <div class="teacher-stats">
                <div class="stat-item">
                  <h3>{{ teacher.courseCount }}</h3>
                  <p>课程数量</p>
                </div>
                <div class="stat-item">
                  <h3>{{ teacher.studentCount }}</h3>
                  <p>学员数量</p>
                </div>
                <div class="stat-item">
                  <h3>{{ teacher.rating }}</h3>
                  <p>评分</p>
                </div>
              </div>
            </div>
          </div>
          <div class="teacher-actions">
            <el-button type="primary" class="btn-primary" @click="handleFollow">
              <el-icon><Plus /></el-icon>
              关注讲师
            </el-button>
            <el-button type="success" class="btn-primary" @click="handleMessage">
              <el-icon><ChatDotRound /></el-icon>
              发送消息
            </el-button>
          </div>
        </div>
      </div>

      <!-- 讲师介绍 -->
      <div class="teacher-intro card">
        <h2>讲师介绍</h2>
        <div class="intro-content">
          <p>{{ teacher.introduction }}</p>
          <div class="skills">
            <h3>专业技能</h3>
            <div class="skill-tags">
              <span class="skill-tag" v-for="skill in teacher.skills" :key="skill">{{ skill }}</span>
            </div>
          </div>
          <div class="experience">
            <h3>工作经历</h3>
            <div class="timeline">
              <div class="timeline-item" v-for="exp in teacher.experience" :key="exp.company">
                <div class="timeline-dot"></div>
                <div class="timeline-content">
                  <h4>{{ exp.position }}</h4>
                  <p class="company">{{ exp.company }}</p>
                  <p class="period">{{ exp.period }}</p>
                  <p class="description">{{ exp.description }}</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 讲师课程 -->
      <div class="teacher-courses">
        <div class="section-header">
          <h2>讲师课程</h2>
          <el-radio-group v-model="courseFilter" size="small">
            <el-radio-button label="all">全部课程</el-radio-button>
            <el-radio-button label="new">最新课程</el-radio-button>
            <el-radio-button label="hot">最热课程</el-radio-button>
          </el-radio-group>
        </div>
        <el-row :gutter="20">
          <el-col :span="8" v-for="course in filteredCourses" :key="course.id">
            <div class="course-card card" @click="goToCourse(course.id)">
              <div class="course-image">
                <img :src="course.img" :alt="course.title">
                <div class="course-level" :class="course.level">{{ course.levelText }}</div>
                <div class="course-tag" v-if="course.isNew">新课</div>
              </div>
              <div class="course-content">
                <h3>{{ course.title }}</h3>
                <p class="course-desc">{{ course.desc }}</p>
                <div class="course-info">
                  <div class="course-meta">
                    <span class="students">
                      <el-icon><UserFilled /></el-icon>
                      {{ course.students }}人学习
                    </span>
                    <span class="rating">
                      <el-icon><Star /></el-icon>
                      {{ course.rating }}
                    </span>
                  </div>
                </div>
                <div class="course-footer">
                  <div class="tags">
                    <span class="tag" v-for="tag in course.tags" :key="tag">{{ tag }}</span>
                  </div>
                  <div class="price" v-if="course.price > 0">
                    ¥{{ course.price }}
                  </div>
                  <div class="price free" v-else>
                    免费
                  </div>
                </div>
              </div>
            </div>
          </el-col>
        </el-row>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { 
  Plus, ChatDotRound, UserFilled, Star 
} from '@element-plus/icons-vue'

const route = useRoute()
const router = useRouter()

// 讲师信息
const teacher = ref({
  id: 1,
  name: '张教授',
  title: '资深前端工程师',
  avatar: 'https://picsum.photos/200/200?random=1',
  isNew: true,
  courseCount: 12,
  studentCount: 5000,
  rating: 4.9,
  introduction: '拥有10年前端开发经验，专注于Vue.js和React技术栈。曾就职于多家知名互联网公司，参与过多个大型项目的开发。擅长前端架构设计、性能优化和团队管理。',
  skills: ['Vue.js', 'React', 'TypeScript', 'Node.js', 'Webpack', '性能优化'],
  experience: [
    {
      position: '高级前端工程师',
      company: '腾讯科技',
      period: '2018-2021',
      description: '负责公司核心产品的前端架构设计和开发，带领团队完成多个重要项目。'
    },
    {
      position: '前端技术专家',
      company: '阿里巴巴',
      period: '2015-2018',
      description: '参与电商平台的前端开发，负责性能优化和架构升级。'
    },
    {
      position: '前端开发工程师',
      company: '百度',
      period: '2012-2015',
      description: '参与搜索引擎相关产品的前端开发工作。'
    }
  ]
})

// 课程筛选
const courseFilter = ref('all')

// 课程列表
const courses = ref([
  {
    id: 1,
    title: 'Vue3 实战教程',
    desc: '从入门到精通，掌握Vue3开发技能',
    img: 'https://picsum.photos/400/300?random=1',
    students: 1234,
    rating: 4.9,
    level: 'beginner',
    levelText: '入门',
    isNew: true,
    tags: ['Vue3', '前端', 'JavaScript'],
    price: 199
  },
  {
    id: 2,
    title: 'React 高级教程',
    desc: '深入学习React核心概念和最佳实践',
    img: 'https://picsum.photos/400/300?random=2',
    students: 2345,
    rating: 4.8,
    level: 'advanced',
    levelText: '高级',
    tags: ['React', '前端', 'TypeScript'],
    price: 299
  },
  {
    id: 3,
    title: 'TypeScript 入门到精通',
    desc: '系统学习TypeScript，提升代码质量',
    img: 'https://picsum.photos/400/300?random=3',
    students: 3456,
    rating: 4.7,
    level: 'intermediate',
    levelText: '中级',
    tags: ['TypeScript', '前端'],
    price: 0
  }
])

// 过滤后的课程列表
const filteredCourses = computed(() => {
  switch (courseFilter.value) {
    case 'new':
      return courses.value.filter(course => course.isNew)
    case 'hot':
      return [...courses.value].sort((a, b) => b.students - a.students)
    default:
      return courses.value
  }
})

function handleFollow() {
  // TODO: 实现关注功能
}

function handleMessage() {
  // TODO: 实现发送消息功能
}

function goToCourse(id) {
  router.push(`/course/${id}`)
}
</script>

<style scoped>
.teacher-content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

.teacher-header {
  margin-bottom: 20px;
  padding: 30px;
}

.header-content {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.teacher-info {
  display: flex;
  gap: 24px;
}

.teacher-avatar {
  position: relative;
  width: 120px;
  height: 120px;
}

.teacher-avatar img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
}

.teacher-tag {
  position: absolute;
  top: 0;
  right: 0;
  background: #f56c6c;
  color: white;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 12px;
}

.teacher-text h1 {
  margin: 0 0 8px;
  font-size: 28px;
  color: var(--text-primary);
}

.teacher-title {
  margin: 0 0 16px;
  color: var(--text-secondary);
  font-size: 16px;
}

.teacher-stats {
  display: flex;
  gap: 32px;
}

.stat-item {
  text-align: center;
}

.stat-item h3 {
  margin: 0 0 4px;
  font-size: 24px;
  color: var(--text-primary);
}

.stat-item p {
  margin: 0;
  color: var(--text-secondary);
}

.teacher-actions {
  display: flex;
  gap: 12px;
}

.teacher-intro {
  margin-bottom: 20px;
  padding: 30px;
}

.teacher-intro h2 {
  margin: 0 0 20px;
  font-size: 24px;
  color: var(--text-primary);
}

.intro-content p {
  margin: 0 0 24px;
  color: var(--text-secondary);
  line-height: 1.6;
}

.skills {
  margin-bottom: 24px;
}

.skills h3 {
  margin: 0 0 12px;
  font-size: 18px;
  color: var(--text-primary);
}

.skill-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.skill-tag {
  padding: 4px 12px;
  background: rgba(79, 172, 254, 0.1);
  color: var(--primary-color);
  border-radius: 16px;
  font-size: 14px;
}

.experience h3 {
  margin: 0 0 16px;
  font-size: 18px;
  color: var(--text-primary);
}

.timeline {
  position: relative;
  padding-left: 24px;
}

.timeline::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--border-color);
}

.timeline-item {
  position: relative;
  padding-bottom: 24px;
}

.timeline-dot {
  position: absolute;
  left: -29px;
  top: 6px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--primary-color);
  border: 2px solid white;
}

.timeline-content h4 {
  margin: 0 0 4px;
  font-size: 16px;
  color: var(--text-primary);
}

.timeline-content .company {
  margin: 0 0 4px;
  color: var(--text-secondary);
  font-size: 14px;
}

.timeline-content .period {
  margin: 0 0 8px;
  color: var(--text-light);
  font-size: 14px;
}

.timeline-content .description {
  margin: 0;
  color: var(--text-secondary);
  font-size: 14px;
  line-height: 1.6;
}

.teacher-courses {
  margin-bottom: 20px;
}

.section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
}

.section-header h2 {
  margin: 0;
  font-size: 24px;
  color: var(--text-primary);
}

.course-card {
  margin-bottom: 20px;
  cursor: pointer;
  transition: transform var(--transition-duration) ease;
}

.course-card:hover {
  transform: translateY(-5px);
}

.course-image {
  position: relative;
  height: 200px;
  overflow: hidden;
}

.course-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--transition-duration) ease;
}

.course-card:hover .course-image img {
  transform: scale(1.05);
}

.course-level {
  position: absolute;
  top: 12px;
  left: 12px;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  color: white;
}

.course-level.beginner {
  background: #67c23a;
}

.course-level.intermediate {
  background: #e6a23c;
}

.course-level.advanced {
  background: #f56c6c;
}

.course-tag {
  position: absolute;
  top: 12px;
  right: 12px;
  background: #f56c6c;
  color: white;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
}

.course-content {
  padding: 20px;
}

.course-content h3 {
  margin: 0 0 8px;
  font-size: 18px;
  color: var(--text-primary);
}

.course-desc {
  margin: 0 0 12px;
  color: var(--text-secondary);
  font-size: 14px;
  line-height: 1.5;
  height: 42px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

.course-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.course-meta {
  display: flex;
  gap: 12px;
  color: var(--text-light);
  font-size: 14px;
}

.course-meta span {
  display: flex;
  align-items: center;
  gap: 4px;
}

.course-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.tags {
  display: flex;
  gap: 8px;
}

.tag {
  padding: 2px 8px;
  background: rgba(79, 172, 254, 0.1);
  color: var(--primary-color);
  border-radius: 4px;
  font-size: 12px;
}

.price {
  font-size: 18px;
  font-weight: bold;
  color: #f56c6c;
}

.price.free {
  color: #67c23a;
}
</style> 